// 职位模板
<template>
  <div class="list-container">
    <div class="main">
      <el-row class="position-tips-row">
        <el-card class="tips">
          <p class="tips-header clearfix">
            <span>设置职位模板&nbsp;&nbsp;<em class="smallTips">【提示：您最多可以制作40个职位模板!】</em></span>
          </p>
        </el-card>
      </el-row>
      <el-row class="position-button-row">
        <div class="left">

        </div>
        <div class="right">
          <button size="small" @click="AllDel" class="container-botton">删除</button>
          <router-link to='/Release?type=1'>
            <el-button type="primary" size="small">添加</el-button>
          </router-link>
        </div>
      </el-row>
      <el-row class="position-table-row">
        <el-table :data="tableData" style="width:100%;" class="elTable" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <!-- <el-table-column type="selection" width="55">
          </el-table-column> -->
          <el-table-column prop="templateName" label="模板名称">
            <template slot-scope="scope">
              <el-button type="text" @click="toRelease(scope.row)">{{scope.row.templateName}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="jobTypeText" label="职位类型"></el-table-column>
          <el-table-column prop="educationText" label="学历" width="130"></el-table-column>
          <el-table-column prop="workExpText" label="工作经验" width="130"></el-table-column>
          <el-table-column prop="workAreaText" label="工作地点"></el-table-column>
          <el-table-column label="操作" width="130">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="toRelease(scope.row)">发布职位</el-button>
              <el-button type="text" size="small" @click="toDel(scope.row)" class="del">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination background layout="prev, pager, next,total" @current-change="handleCurrentChange"
            :current-page="pageInfo.page" :total="pageInfo.total">
          </el-pagination>
        </div>
      </el-row>
    </div>
  </div>
</template>
<script>
import { templatePage, templateDelete, validCompany } from '../../../api/index.js'
export default {
  name: '',
  data () {
    return {
      pageInfo: {
        page: 1,
        total: 0,
        size: 10
      },
      tableData: [],
      //选中的
      multipleSelection: [],
    }
  },
  mounted () {
    // 初始化列表数据
    this.initData();
    // this.statusCount()
  },
  methods: {
    initData () {
      //开启loading
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.1)'
      });
      let query = new FormData()
      query.append('page', this.pageInfo.page)
      query.append('size', this.pageInfo.size)
      // 获取职位模板
      templatePage(query).then(res => {
        if (res.success) {
          this.tableData = res.data.records || [];
          this.pageInfo.total = res.data.total
          //关闭loading
          loading.close()
        } else {
          //关闭loading
          loading.close()
          this.$message.error(`${res.msg}`)
        }
      }).catch(() => {
        //关闭loading
        loading.close()
      })
    },
    // 点击发布职位，进入发布职位页面，载入模板中的职位类型
    toRelease (row) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      validCompany().then(res => {
        if (res.success) {
          loading.close()
          this.$router.push({
            path: '/Release',
            query: {
              row: JSON.stringify(row),
              type: 1
            }
          })
        } else {
          loading.close()
          this.$alert(res.msg, '系统提醒', {
            confirmButtonText: '完善信息',
            callback: action => {
              this.$router.push({
                path: '/companySet'
              })
            }
          });
        }
      })
    },
    // 删除职位模板
    toDel (row) {
      this.$confirm('将删除该职位模板, 是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: action => {
          if (action === 'confirm') {
            templateDelete(row.id).then(data => {
              if (data.success) {
                this.$message.success('职位模板删除成功!')
                this.initData();
              } else {
                this.$message.error(`${data.msg}`)
              }
            });
          }
        }
      });
    },
    // 选择项发生变化时
    handleSelectionChange (val) {
      console.log(val, '选中的')
      this.multipleSelection = val;
    },
    // 全部删除
    AllDel () {
      if (this.multipleSelection.length < 1) {
        this.$message.error('请选择需要删除的职位模板!');
      } else {
        this.$confirm('将删除选中的职位模板，是否确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          callback: action => {
            if (action == 'confirm') {
              let ids = []
              this.multipleSelection.map(item => {
                ids.push(item.id)
              })
              console.log(ids.join(','), 'ids')

              templateDelete(ids.join(',')).then(data => {
                if (data.success) {
                  this.$message.success('职位模板删除成功!')
                  this.initData();
                } else {
                  this.$message.error(`${data.msg}`)
                }
              });
            }
          }
        })
      }
    },
    handleCurrentChange (current) {
      this.pageInfo.page = current;
      this.initData();
    }
  }
}
</script>
<style scope>
.list-container {
    /* border: 1px solid green; */
}
.list-container .main {
    background: #fff;
}
.position-tips-row {
    height: 68px;
    /* border-bottom: 2px solid #e8e8e8; */
}
.position-button-row {
    height: 70px;
    display: flex;
    justify-content: space-between;
    padding: 25px 44px 14px 35px;
    box-sizing: border-box;
}
.position-button-row div {
    flex: 1;
}
.position-button-row .right {
    text-align: right;
}
.position-table-row {
    margin: 0 44px auto 36px;
}

.tips {
    padding: 35px 45px 18px 44px;
    font-size: 14px;
    border-bottom: 2px solid #e8e8e8;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #555555;
}
.tips .el-card__body {
    padding: 0;
}
.tips-header {
    height: 20px;
    line-height: 20px;
    position: relative;
}
.tips-header span {
    font-family: Source Han Sans CN;
    font-weight: 600;
    width: 96px;
    height: 16px;
    font-size: 20px;
    line-height: 16px;
    color: #222222;
}
.tips-header span::before {
    /* content: '';
    width: 5px;
    height: 20px;
    background-color: #1893fc;
    position: absolute;
    left: 0;
    top: 0; */
}
.tips-header span .smallTips {
    font-size: 12px;
    color: #fd4e40;
    font-weight: normal;
}
.pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 124px;
    text-align: center;
    background: #ffffff;
}
.elTable {
    width: 100%;
    height: 532px;
    border-bottom: 0;
    font-size: 14px;
}
.elTable .del {
    color: #fd4e40;
}
.el-table th,
.el-table td {
    text-align: center;
}
.el-table__body-wrapper .el-table__empty-block {
    width: 99.8% !important;
    height: 488px !important;
    border-bottom: 0;
}
.el-table__body-wrapper .el-table__empty-text {
    font-size: 18px;
}
.container-botton {
    width: 56px;
    height: 32px;
    border: 1px solid rgba(24, 147, 252, 1);
    font-size: 12px;
    line-height: 32px;
    color: rgba(24, 147, 252, 1);
    background: #fff;
    margin-right: 20px;
}
</style>